const w = window.innerWidth,
			h = window.innerHeight,
			maxNumber = 15;  //最多垃圾数量
			addFen = 10;  //答对加分
			
			$('.gitnub').text('1/'+maxNumber);
			
	var failSound, sucSound, bgSound;
			
//创建一个 Pixi应用 需要的一些参数
let option = {
	width: w,
	height: h,
	antialias: true, //锯齿度，平滑字体和图形基元的边缘
	transparent: true, //透明，使画布背景透明
	resolution: window.devicePixelRatio | 1 //分辨率，使用不同分辨率和像素密度的显示更容易
}
//创建一个 Pixi应用
let app = new PIXI.Application(option);
//获取舞台
let stage = app.stage;
//获取渲染器
let renderer = app.renderer;
let playground = document.querySelector('.px_render');
//把 Pixi 创建的 canvas 添加到页面上
playground.appendChild(renderer.view);

var canvas = document.querySelector('canvas');
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';

//实例化Bump 碰撞检测，用来检查两个精灵是否接触。
// Bump文档 https://github.com/kittykatattack/bump/blob/master/README.md
let b = new Bump(PIXI);

// 背景音乐
var myVid = document.getElementById('audio'); //bg_m


//图片预加载
PIXI.loader
	.add(other)
	.add(wasteSpriteList)
	.add(spriteljtList)
	.on("progress", function(target, resource) {
		// console.log(resource.url);
		let i = parseInt(target.progress);
		
		if(i >= 6){
			$('.jd-content').css('width',i + '%');
		}
	})
	.load(setup);
	
//需要创建的精灵
let sprite, sprite1, sprite2, sprite3, sprite4;
let message; //垃圾桶名
let randoms = []; //随机10个不重复数字
let index = 0;     //用于记录当前渲染的垃圾精灵下标
let number_f = 0;  //垃圾个数
let game_time = 120;   //游戏设定时间，这里还没用到该参数
let objarr = [];   //用来装载垃圾精灵的数组

// 图片预加载完后执行方法
function setup() {
	// 生成随机数
	randome();
	// 隐藏loading页
	setTimeout(function() {
		$('.loding').fadeOut(300);
	}, 200);
	
	// 加载完开始播放音乐
	musicFun();
	// 异步加载声音
	loadSounds(); 
	
	// 四个垃圾桶
	sprite1 = new PIXI.Sprite(PIXI.loader.resources[spriteljtList[0]].texture);
	sprite2 = new PIXI.Sprite(PIXI.loader.resources[spriteljtList[1]].texture);
	sprite3 = new PIXI.Sprite(PIXI.loader.resources[spriteljtList[2]].texture);
	sprite4 = new PIXI.Sprite(PIXI.loader.resources[spriteljtList[3]].texture);
	let bg = new PIXI.Sprite(PIXI.loader.resources[other[0]].texture);
	message = new PIXI.Text();
	bg.width = w;
	bg.height = h;
	let scale_k = 0.2 * w / sprite1.width;
	sprite1.scale.set(scale_k);
	sprite1.anchor.set(0.5);
	sprite1.position.set(0.14 * w, 0.87 * h);
	sprite2.scale.set(scale_k);
	sprite2.anchor.set(0.5);
	sprite2.position.set(0.38 * w, 0.87 * h);
	sprite3.scale.set(scale_k);
	sprite3.anchor.set(0.5);
	sprite3.position.set(0.63 * w, 0.87 * h);
	sprite4.scale.set(scale_k);
	sprite4.anchor.set(0.5);
	sprite4.position.set(0.87 * w, 0.87 * h);
	
	// 按下垃圾桶弹出提示介绍
	// garbageClick(sprite1, spriteClick1);
	// garbageClick(sprite2, spriteClick2);
	// garbageClick(sprite3, spriteClick3);
	// garbageClick(sprite4, spriteClick4);
	
	// 添加背景游戏中的图片
	stage.addChild(bg);

	// 添加4个垃圾桶
	stage.addChild(sprite1);
	stage.addChild(sprite2);
	stage.addChild(sprite3);
	stage.addChild(sprite4);
	// stage.addChild(music);
	// stage.addChild(message);

	// 加载垃圾精灵
	spritelist(wasteSpriteList[randoms[index]]);
	//开始游戏循环
	gameLoop();
}

// 播放背景音乐
function musicFun() {
	myVid.play();
	document.addEventListener("WeixinJSBridgeReady", function() {
		myVid.play();
	}, false);
	// 监听是否进入后台
	document.addEventListener("visibilitychange", () => {
		if (document.hidden) {
			myVid.pause();
		} else {
			// 判断是否手动关闭音乐，否则后台跳回来继续播放
			if(!sessionStorage.getItem('stopMusic')){
				$(".music img").attr('src', "./images/music1.png");
				myVid.play();				
			} else {
				myVid.pause();
			}
		}
	});	
}

//单个加载垃圾精灵
function spritelist(spriteurl) { 
	console.log(spriteurl);
	lj_name(spriteurl.name);
	let imgurl = PIXI.utils.TextureCache[spriteurl.url];
	sprite = new PIXI.Sprite(imgurl);
	var sprite_k = 0.25 * w / sprite.width;
	sprite.anchor.set(0.5);
	sprite.scale.set(sprite_k);
	// 设置垃圾精灵可点击事件
	sprite.interactive = true;
	sprite.buttonMode = true;
	sprite.position.set(w / 2, h / 2.5);
	sprite.iskepp = false;
	stage.addChild(sprite);
	
	// 垃圾精灵的手势事件
	sprite
		.on('touchstart', onDragStart)  //触摸开始
		.on('touchend', onDragEnd)      //触摸结束
		.on('touchendoutside', onDragEnd)   //触摸开始，移出对象松开
		.on('touchmove', onDragMove);   //触摸移动监听
}

// 按下垃圾桶弹出介绍
function garbageClick(sprite, spriteclick) {
	sprite.interactive = true;
	sprite.buttonMode = true;
	sprite.on('pointerdown', spriteclick);
}

// 动画循环
function gameLoop() {
	// 循环调用gameLoop
	// requestAnimationFrame(gameLoop);
	// state();
	// 渲染舞台
	renderer.render(stage);
}

// 游戏开始
function play(sprite) {
	// hit 方法是一种通用碰撞检测功能。它会自动检测碰撞中使用的精灵种类，并选择适当的碰撞方法。
	// 监听两个垃圾是否和垃圾桶碰撞在一起
	// b.hit(sprite, sprite1) 如果两个精灵碰撞在一起则会返回true 否值返回false
	if (b.hit(sprite, sprite1)) {
		// 当垃圾和第一个垃圾桶碰撞时
		message = 1;
		sprite.iskepp = true;
		
		// 碰撞时，垃圾桶动画向上
		animsprite(sprite1);
		// 其他垃圾桶保持原来位置
		endanimsprite([sprite2, sprite3, sprite4]);
	} else if (b.hit(sprite, sprite2)) {
		// 当垃圾和第二个垃圾桶碰撞时
		message = 2;
		sprite.iskepp = true;
		animsprite(sprite2);
		endanimsprite([sprite1, sprite3, sprite4]);
	} else if (b.hit(sprite, sprite3)) {
		// 当垃圾和第三个垃圾桶碰撞时
		message = 3;
		sprite.iskepp = true;
		animsprite(sprite3);
		endanimsprite([sprite1, sprite2, sprite4]);
	} else if (b.hit(sprite, sprite4)) {
		// 当垃圾和第四个垃圾桶碰撞时
		message = 4;
		sprite.iskepp = true;
		animsprite(sprite4);
		endanimsprite([sprite1, sprite2, sprite3]);
	} else {
		sprite.iskepp = false;
		endanimsprite([sprite1, sprite2, sprite3, sprite4]);
		message.text = "没有碰到";
	}
	
	// 垃圾能拖动的范围位置
	/*
		b.contain(sprite, obj, bool, callback) 
		包含在矩形内移动
		sprite: 精灵
		obj(x,y,width,height): 从左上角开始的小,y轴，矩形宽(width)高(height)
		bool: 为ture时精灵有反弹效果
		callback: 回调方法
	*/
	let collision = b.contain(sprite, {
		x: 0,
		y: h / 4.5,
		width: w,
		height: h
	}, true, callbackFunction);
	function callbackFunction(collision) {
		// console.log("collision", collision);
	}
}

// 拖动垃圾到垃圾桶碰撞后动画
function animsprite(sprite) {
	TweenMax.to(sprite, 0.2, {
		y: 0.87 * h - 20,
	});
}

// 垃圾桶回到原来位置动画
function endanimsprite(sprite) {
	TweenMax.to(sprite, 0.2, {
		y: 0.87 * h,
	});
}

// 拖动垃圾精灵动作开始
function onDragStart(event) {
	console.log('拖动开始');
	this.data = event.data;
	// 拖动设置为true
	this.dragging = true;
}

// 拖动垃圾动作结束(松手)
function onDragEnd() {
	console.log('拖动结束');
	// console.log('index：'+this.index);
	
	// this指向当前拖动的精灵
	let that = this;
	// index记录当前精灵数是否是两个一组的，由151行sprite.index = i;赋值
	this.dragging = false;
	this.data = null;
	
	// iskepp由152行sprite.iskepp = false;赋值和监听拖动的时候this.iskepp = false;赋值
	// 当iskepp为true时，说明垃圾与垃圾桶相碰撞，松手后移除垃圾精灵
	if (this.iskepp) {
		TweenMax.to(that, 0.2, {
			alpha: 0,
			onComplete: function() {
				stage.removeChild(that);
				// 垃圾桶回到原来位置
				endanimsprite([sprite1, sprite2, sprite3, sprite4]);
				answer(0); //答案
			},
		});
	}
}

// 拖动垃圾监听
function onDragMove() {
	console.log('拖动监听');
	this.iskepp = false;
	if (this.dragging) {
		// 监听鼠标拖动的位置，设置垃圾精灵的位置
		const newPostion = this.data.getLocalPosition(this.parent);
		this.x = newPostion.x;
		this.y = newPostion.y;
		play(this);
	}
}

//垃圾桶点击
function spriteClick1() {
	console.log('点击了可回收垃圾');
}
function spriteClick2() {
	console.log('点击餐饮垃圾')
}
function spriteClick3() {
	console.log('点击有害垃圾')
}
function spriteClick4() {
	console.log('点击其他垃圾')
}

let answerArr = [];
let isk = false;

// 计算答案对错
function answer(id) {
	// id为垃圾组的第几个
	let spriteurls = wasteSpriteList[randoms[index]];
	let lj_name = spriteurls.belong;
	objarr.splice(0, 1);
	spectilind(lj_name, id, spriteurls);
}

// 拖动垃圾答题结果方法
function spectilind(lj_name, id, spriteurls) {
	if (lj_name === message) {
		console.log('答对了');
		isk = true;
		answerArr.push(1);
		sucSound.play();
	} else {
		console.log('答错了:'+spriteurls.tip);
		answerArr.push(0);
		isk = false;
		lj_cengFu(spriteurls);
		failSound.play();
	};
	if (objarr.length == 0) {
		// console.log('a');
		let flag = 0;
		if (answerArr.length > 1) {
			for (let i = 0; i < answerArr.length; i++) {
				if (answerArr[i] === 1) {
					flag++;
				}
			}
			if (flag == 2) {
				number_f += addFen;
				$('.nub span').text(number_f);
				$('.fennumber').show().addClass("animated fadeOutUp");
				setTimeout(function() {
					$('.fennumber').fadeOut().removeClass("animated fadeOutUp");
				}, 1500)
			}
		} else {
			if (answerArr[0] === 1) {
				number_f += addFen;
				$('.nub span').text(number_f);
				$('.fennumber').show().addClass("animated fadeOutUp");
				setTimeout(function() {
					$('.fennumber').fadeOut().removeClass("animated fadeOutUp");
				}, 1000)
			}
		}
		index++;
		if (index != maxNumber) {
			// console.log('a');
			answerArr = [];
			answerArr = [];
			$('.gitnub').text(index + 1 + '/' + maxNumber);
			spritelist(wasteSpriteList[randoms[index]]);
		} else {
			console.log('题目回答完成！！！');
			if (isk) {
				$('.resultbox').fadeIn();
				$('.fens').text(number_f + '分');
			}
		}
	}
}

// 弹出各个垃圾桶介绍或者垃圾答错提示
function lj_cengFu(spriteurls) {
	var transhcan_name = '';
	if (spriteurls.belong == 1){
		transhcan_name = '可回收'
	} else if (spriteurls.belong == 2){
		transhcan_name = '厨余'
	} else if (spriteurls.belong == 3){
		transhcan_name = '有害'
	} else if (spriteurls.belong == 4){
		transhcan_name = '其他'
	}
	
	$('.popUpbox').show();
	$('.popUpbox').find('.waste_img').attr('src', spriteurls.url);
	$('.popUpbox .lj_text').text(spriteurls.name + '属于' + transhcan_name + '垃圾哦');
}

close('.popUpbox');
// 隐藏垃圾桶介绍
function close(cengk) {
	$(cengk).click(function() {
		$(cengk).fadeOut(function() {
			$('.popUpbox').find('.waste_img').attr('src', '');
			$('.popUpbox .lj_text').text('');
		});
		
		// 答错弹窗，关闭弹窗后判断是否结束答题
		if (index >= maxNumber) {
			$('.resultbox').fadeIn();
			$('.fens').text(number_f + '分');
		}
	})
}

// 加载声效
//这个不需要进来就加载，可以游戏初始化后再执行
function loadSounds(callback) {
	// 声音加载
	sounds.load(musicList);
	
	// 声音加载完成后执行
	sounds.whenLoaded = function(e) {
		// 为声音赋值
		bgSound = sounds[musicList[0]];
		sucSound = sounds[musicList[1]];
		failSound = sounds[musicList[2]];
		sucSound.volume = 3;
		failSound.volume = 8;
		
		// 背景声音播放
		// bgSound.play();
		// 背景声音循环
		// bgSound.loop = true;
	};
}

// 生成随机数
function randome() {
	while (true) {
		let isExists = false;
		let random = parseInt(wasteSpriteList.length * (Math.random()));
		for (var i = 0; i < randoms.length; i++) {
			if (random == randoms[i]) {
				isExists = true;
				break;
			}
		}
		if (!isExists) {
			randoms.push(random);
		}
		if (randoms.length === maxNumber) {
			break;
		}
	}
	console.log(randoms);
}

// 游戏中显示垃圾名称
function lj_name(name) {
	$('.lj_name').text(name);
	$('.lj_name').css('left', ($(window).width() - $('.lj_name').width()) / 2 - 18);
}

// 点击开始游戏
$('.p1btn').click(function() {
	$('.p1box').fadeOut();
})

// 点击播放/暂停音乐
$(".music").on("click", function() {
	if ($(this).hasClass("play")) {
		$(this).removeClass("play");
		myVid.pause();
		sessionStorage.setItem('stopMusic',true);
		$(".music img").attr('src', "./images/music.png");
	} else {
		$(this).addClass("play");
		myVid.play();
		sessionStorage.removeItem('stopMusic');
		$(".music img").attr('src', "./images/music1.png");
	}
})

function rePlay(){
	isk = false;
	answerArr = [];
	randoms = []; //随机10个不重复数字
	index = 0;
	number_f = 0;  //垃圾个数
	$('.gitnub').text('1/'+maxNumber);
	$('.nub span').text(0);
	randome();
	spritelist(wasteSpriteList[randoms[index]]);
}

// 点击返回首页
$('.home-btn, .play_agme').click(function(){
	console.log('点击返回首页');
	$('.resultbox').fadeOut(200);
	$('.p1box').fadeIn(100);
	rePlay();
	// window.location.reload();
	
});
